<!--
个人中心
管理个人信息
-->

<template>
  <div class="maintainContainer">
    <div class="avatarArea">
      <div class="avatarPic">
        <img id="img_avatar" src="../img/my_logo.jpg" alt="">
      </div>

      <div class="avatarEdit">
        <el-upload
            class="upload-demo"
            action="../img/avatars/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="primary" style="margin-left: 75px">更改头像</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>

    </div>

    <!--个人信息展示区-->
    <div class="infoArea">
      <div class="div-item-maintain">
        <el-form :model="userForm" :rules="userRules" ref="userForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名称" prop="username">
            <!--用户名称不可修改-->
            <el-input v-model="userForm.username" :disabled="true" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="username">
            <el-input v-model="userForm.password" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名" prop="name">
            <el-input v-model="userForm.name" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="username">
            <el-input v-model="userForm.phone" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="name">
            <el-input v-model="userForm.email" style="width: 500px"></el-input>
          </el-form-item>

          <!--用户角色不可修改-->
          <el-form-item label="用户角色" prop="role">
            <el-radio v-model="userForm.role" label="测试项目经理"></el-radio>
            <el-radio v-model="userForm.role" label="认证工程师"></el-radio>
            <el-radio v-model="userForm.role" label="审批人员"></el-radio>
          </el-form-item>

        </el-form>
      </div>
      <div class="submit-user">
        <el-form>
          <el-form-item style="margin-top: 30px">
            <div style="display: flex">
              <div style="flex:1; width: 33%;">
                <el-button type="primary" @click="submitChange">保存修改</el-button>
                <i class="el-icon-upload" style="padding-left: 5px; font-size: 20px"></i>
              </div>

              <div style="flex:1; width: 33%">
                <el-button>重置表单</el-button>
                <i class="el-icon-delete" style="padding-left: 5px; font-size: 20px"></i>
              </div>
            </div>
          </el-form-item>
        </el-form>

      </div>

    </div>
  </div>

</template>

<script>

import request from "@/utils/request";
import parse from "vue-router";

export default {
  name: "MaintainInfo",

  data() {
    return {
      fileList: [],

      userForm: { //用户表
        username: '',
        password: '',
        name: '',
        phone: '',
        address : '',
        email: '',
        role: '',
        avatar: ''
      },

      userRules: {
        username: [
          {required: true, message: '请输入用户名称', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'change'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'change'}
        ],
        phone: [
          {required: true, message: '请输入11位电话', trigger: 'change'}
        ],
        email: [
          {required: true, message: '请填写邮件', trigger: 'blur'}
        ],
        role: [
          {required: true, message: '请选择用户角色', trigger: 'blur'}
        ],

      },
    };

  },

  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },

    //保存修改个人信息
    submitChange() {
      //request.post('/user/updateUserByUsername', this.userForm)
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          //验证通过
          //发送到后端
          this.$request.post('/user/updateUserByUsername', this.userForm).then(res => {
            //发送数据
            if (res.code === '200') {
              this.$message.success('提交数据成功！')
              this.userForm = res.data
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请完善表单相关信息！');
        }
      });

    }

  },

  mounted() {
    //先拿到token中的数据，获取完整数据

    ///这里还需要改
    request.get('/user/selectByUsernameTwo?username=' + JSON.parse(localStorage.getItem("token")).username
        )
        .then(res => {
          this.userForm = res.data
    }).catch(error => {
          console.error('Error:', error);
    });


  }
}

</script>

<style scoped>

.maintainContainer {
  display: flex;
  width: 100%;
  height: 100%;
}

.avatarArea {
  flex: 1;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.infoArea {
  flex: 4;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

#img_avatar {
  width: 250px;
  height: 250px;
}

.avatarPic {
  text-align: center;
}

.div-item-maintain {
  /*text-align: center;*/
  /*height: 100%;*/
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 20px 5px 5px 100px;
  border: 1px solid #ccc;
  align-items: center;
}

.submit-user {
  flex: 1;
  margin-top: 10px;
  padding: 5px 5px 5px 150px;
  border: 1px solid #ccc;
}


</style>